System = {
	nextId : function() {
		return 'id_' + parseInt(Math.random() * 100000);
	}
};

Map = {
	config : {
		cellSize : {
			width : 36,
			height : 36
		},
		view : {
			_current : null,
			views : [// 地图
			{
				id : '86/51',
				offset : {
					x : 0,
					y : 0
				},
				centerAt : {
					x : 3232,
					y : 1681
				},
				picSize : {
					width : 256,
					height : 256
				},
				size : {
					width : {
						from : -200,
						to : 200,
						length : function() {
							return this.to - this.from;
						}
					},
					height : {
						from : -200,
						to : 200,
						length : function() {
							return this.to - this.from;
						}
					}
				}
			} ],
			current : function() {
				if (this.views.length == 0) {
					alert("No map data found");
				}
				if (this._current == null) {
					_current = this.views[0];
					return this.views[0];
				} else {
					// TODO 找到当前的视图
				}
			},
			refresh : function() {
				// 计算绘图板的大小并绘制图形.
				var center = Map.canvas.center();
				var size = Map.canvas.size();
				var curView = this.current();

				_canvasHanlder = $("#" + Map.canvas.id)[0].getContext('2d');
				_canvasHanlder.clearRect(0, 0, size.width, size.height);

				// 绘制中心图片
				var img = Map.getPic(curView.centerAt.x, curView.centerAt.y);
				_canvasHanlder.drawImage(img, 200, 200);
				return;
				var cellRange = {
					x : {
						_half : parseInt(size.width / Map.config.cellSize.width
								/ 2),
						_from : null,
						_to : null,
						from : function() {
							if (this._from == null) {
								this._from = curView.centerAt.x - this._half;
								this._from = this._from < curView.size.width.from ? curView.size.width.from
										: this._from;
							}
							return this._from;
						},
						to : function() {
							if (this._to == null) {
								this._to = curView.centerAt.x + this._half + 1;
								this._to = this._to < curView.size.width.to ? curView.size.width.to
										: this._to;
							}
							return this._to;
						}
					},
					y : {
						_half : parseInt(size.height
								/ Map.config.cellSize.height / 2),
						_from : null,
						_to : null,
						from : function() {
							if (this._from == null) {
								this._from = curView.centerAt.y - this._half;
								this._from = this._from < curView.size.height.from ? curView.size.height.from
										: this._from;
							}
							return this._from;
						},
						to : function() {
							if (this._to == null) {
								this._to = curView.centerAt.y + this._half + 1;
								this._to = this._to < curView.size.height.to ? curView.size.height.to
										: this._to;
							}
							return this._to;
						}
					}
				};

				_canvasHanlder = $("#" + Map.canvas.id)[0].getContext('2d');
				_canvasHanlder.clearRect(0, 0, size.width, size.height);
				var img = $("#bgMap")[0];
				_canvasHanlder.drawImage(img, curView.centerAt.x
						* -Map.config.cellSize.width + curView.offset.x,
						curView.centerAt.y * -Map.config.cellSize.height
								+ curView.offset.y);
				return;
				var left = cellRange.x.from();
				var right = cellRange.x.to();
				var top = cellRange.y.from();
				var bottom = cellRange.y.to();
				for ( var j = top; j <= bottom; j++) {
					var y = (j - top) * Map.config.cellSize.height + 1
							- Map.config.cellSize.height / 2;
					y += curView.offset.y;
					for ( var i = left; i <= right; i++) {
						var x = (i - left) * Map.config.cellSize.width + 1
								- Map.config.cellSize.width / 2;
						x += curView.offset.x;
						_canvasHanlder.strokeRect(x, y,
								Map.config.cellSize.width,
								Map.config.cellSize.height);
						_canvasHanlder.fillText(i + "", x, y + 10);
						_canvasHanlder.fillText(j + "", x, y + 20);
					}
				}
			}

		}

	},
	initial : function(containerId) {
		this.container.id = containerId;
		// 初始化地图
		var contSize = this.container.size();
		$("#" + containerId).append(
				$("<canvas id='" + this.canvas.id + "' style='width:"
						+ contSize.width + "px;height:" + contSize.height
						+ "px;' width='" + contSize.width + "px' height='"
						+ contSize.height + "px'/>"));
		this.canvas.bindSimpleDragEvents();
		this.config.view.refresh();

	},
	container : {
		id : '',
		size : function() {
			return Map._size(this.id);
		}
	},
	canvas : {
		id : System.nextId(),
		_handler : null,
		_canvas : null,
		_draging : false,
		_dragingPoint : {
			x : 0,
			y : 0
		},
		size : function() {
			return Map._size(this.id);
		},
		center : function() {
			var size = this.size();
			return {
				x : size.width / 2,
				y : size.height / 2
			};
		},
		hanlder : function() {
			if (this._handler == null) {
				this._handler = $("#" + this.id);
			}
			return this._handler;
		},
		bindSimpleDragEvents : function() {
			var me = this.hanlder();
			// 解决鼠标拖拽问题
			me.mouseup(function(e) {
				if (!Map.canvas._draging)
					return;
				Map.canvas._draging = false;
				var cur = Map.config.view.current();
				var offsetX = e.screenX - Map.canvas._dragingPoint.x;
				var offsetY = e.screenY - Map.canvas._dragingPoint.y;
				var xCell = parseInt(offsetX / Map.config.cellSize.width);
				var xCellMod = offsetX % Map.config.cellSize.width;
				var yCell = parseInt(offsetY / Map.config.cellSize.height);
				var yCellMod = offsetY % Map.config.cellSize.height;
				cur.offset.x = xCellMod;
				cur.offset.y = yCellMod;
				cur.centerAt.x -= xCell;
				cur.centerAt.y -= yCell;
				Map.config.view.refresh();
			});
			me.mousedown(function(e) {
				Map.canvas._draging = true;
				Map.canvas._dragingPoint.x = e.screenX;
				Map.canvas._dragingPoint.y = e.screenY;
			});
		},
		bindContinuousDragEvents : function() {
			var me = this.hanlder();
			// 解决鼠标拖拽问题
			me.mouseup(function(e) {
				if (!Map.canvas._draging)
					return;
			});
			me.mousedown(function(e) {
				Map.canvas._draging = true;
				Map.canvas._dragingPoint.x = e.screenX;
				Map.canvas._dragingPoint.y = e.screenY;
			});
			me.mousemove(function(e) {
				if (!Map.canvas._draging)
					return;
				var cur = Map.config.view.current();
				var offsetX = e.screenX - Map.canvas._dragingPoint.x;
				var offsetY = e.screenY - Map.canvas._dragingPoint.y;
				var xCell = parseInt(offsetX / Map.config.cellSize.width);
				var xCellMod = offsetX % Map.config.cellSize.width;
				var yCell = parseInt(offsetY / Map.config.cellSize.height);
				var yCellMod = offsetY % Map.config.cellSize.height;
				cur.offset.x = xCellMod;
				cur.offset.y = yCellMod;
				cur.centerAt.x -= xCell;
				cur.centerAt.y -= yCell;
				Map.config.view.refresh();
			});
		}
	},
	res : {
		maps : {}
	},
	_size : function(tagId) {
		var obj = $("#" + tagId);
		return {
			width : obj.width(),
			height : obj.height()
		};
	},
	loadPic : function(picX, picY) {
		var img = new Image();
		img.src = "map/86/51/" + picX + "," + picY + ".jpg";
		eval("var isSet=this.res.maps.x" + picX + "!=null");
		if (!isSet) {
			eval("this.res.maps.x" + picX + "=new Object()");
		}
		eval("this.res.maps.x" + picX + ".y" + picY + "=img");
	},
	getPic : function(picX, picY) {
		if (this.res.maps.hasOwnProperty("x" + picX)) {
			eval("var img=this.res.maps.x" + picX + ".y" + picY );
			return img;
		} else {
			return null;
		}

	}
};
